<div
  class="red"
  style="width: 500px; height: 500px; display: flex; justify-content: center; align-items: stretch; gap: 20px; padding: 20px; box-sizing: border-box;"
>
  <div
    class="yellow"
    style="width: auto; height: auto; flex: 1; display: flex; flex-direction: column; padding: 20px; gap: 20px"
  >
    <div
      class="fuchsia"
      style="height: auto; width: auto; flex: 1;"
    ></div>

    <div
      class="orange"
      style="height: auto; width: auto; flex: 1; display: flex; justify-content: center; align-items: center;"
    >
      <div
        class="red"
        style="height: 100px; width: 100px;"
      ></div>
    </div>
  </div>

  <div
    class="blue"
    style="width: auto; height: auto; flex: 0.5; display: flex; padding: 20px; align-items: stretch;"
  >
    <div
      class="pink"
      style="height: 100px; width: auto; flex: 1;"
    ></div>
    <div
      class="hotpink"
      style="height: 100px; width: auto; flex: 1; align-self: flex-end;"
    ></div>
  </div>
</div>

<style lang="postcss">
  @import '../../colors.postcss';
</style>
